<template>
  <ElHeader>
    <RouterLink to="/" class="logo">{{ useAppStore.name }}</RouterLink>
    <viewThemeSwitch></viewThemeSwitch>
  </ElHeader>
  <div class="view"><RouterView></RouterView></div>
</template>
<script setup lang="ts">
import { ElHeader } from "element-plus";
import store from "@/store";
import viewThemeSwitch from "@/components/themeSwitch.vue";
const useAppStore = store.useAppStore();
</script>
<style scoped lang="scss">
.el-header {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--el-border-color);
  background-image: radial-gradient(transparent 1px, var(--el-bg-color) 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
  .logo {
    font-size: 26px;
    font-weight: 700;
    color: var(--el-color-primary);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
  }
}
.view {
  box-sizing: border-box;
  padding: 10px;
}
</style>
